<template>
  <dv-full-screen-container class="full_container">
    <div v-if="showLoading" class="showLoading">
      <dv-loading>Loading...</dv-loading>
    </div>
    <div v-else>
      <!-- 头部图片 -->
      <div class="title_img header_img">
        <img src="../../../static/images/purchase-title.png" />
      </div>

      <div class="app_main">
        <!-- 按钮list -->
        <div class="btn_list">
           <button class="btn" :class="activeBtn==='week'?'activeBtn':''" @click="activeBnt('week')" @touchstart.stop.prevent="touchstartAction('week')">本周</button>
           <button class="btn" :class="activeBtn==='today'?'activeBtn':''" @click="activeBnt('today')" @touchstart.stop.prevent="touchstartAction('today')">当日</button>
           <button class="btn" :class="activeBtn==='month'?'activeBtn':''" @click="activeBnt('month')" @touchstart.stop.prevent="touchstartAction('month')">本月</button>
        </div>

        <!-- flex 布局 -->
        <div class="flex_box">
            <dv-border-box-10 class="flex2"> <factory ref="factory" :factoryConfig="factoryConfig" :active="activeBtn"></factory> </dv-border-box-10>
            <div class="flex3">
               <overview :active="activeBtn" :overviewData="overviewData" :factoryData="factoryData"></overview>
            </div>
            <dv-border-box-10 class="flex2"><notices ref="notices" :active="activeBtn"></notices> </dv-border-box-10>
        </div>

      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import factory from './components/factory'
import notices from './components/notices'
import overview from './components/overview'
// import untils from '@/untils/index.js'
import WsClient from 'lola-ws-client'

export default {
  components: {factory, notices, overview},
  name: 'Purchase',
  data () {
    return {
      showLoading: true,
      activeBtn: 'week',
      overviewData: null,
      factoryData: [],
      factoryConfig: null,
      sockect: null
    }
  },
  created () {
    this.sockect = new WsClient(this.$config.ws, (rsp) => {
      console.log('message')
    }, () => {
      console.log('ws connected')
    })
    this.initWs()
  },
  methods: {
    touchstartAction (val) {
      console.log('监听到触摸屏幕触摸点击开始事件')
      this.activeBtn = val
      this.sendQueryOverview()
      this.sendFatoryDirect()
    },
    activeBnt (val) {
      this.activeBtn = val
      this.sendQueryOverview()
      this.sendFatoryDirect()
    },
    initWs () {
      const that = this
      this.sockect.onOpen = () => {
        // 注入行情推送结果处理器
        that.sockect.addListner(that.$config.wsDirect.LOGIN, (res) => {
          console.log(res)
        })
        that.sockect.addListner(that.$config.wsDirect.PUSH_PUR_ORDER_REQUEST, that.dealOrder)
        that.sockect.addListner(that.$config.wsDirect.QUERY_PURCHASE_STATISTICS, that.dealQueryOverview)
        that.sockect.addListner(that.$config.wsDirect.QUERY_COMPANY_STATISTICS, that.dealQueryFactory)
        that.sockect.addListner(that.$config.wsDirect.PUSH_RELOAD, (res) => {
          console.log('监听到页面刷新指令,即将刷新页面===============')
          console.log(res)
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
        that.login()
      }
      this.sockect.onMessage = (r) => {
        console.log(r)
      }
      this.sockect.onClose = (res) => {
        console.log('断开重连中 wait.........')
        this.initWs()
      }
      this.sockect.init()
    },
    login () {
      console.log('===尝试发送ws登录===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.LOGIN, { userName: '1', password: '', verifyCode: '' }, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')
          that.subscriber() // 发送订阅请求
          that.sendQueryOverview()
          that.sendFatoryDirect()
        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送ws登录===END===')
    },
    subscriber () {
      console.log('===尝试发送订阅请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.PUSH_REQUEST, null, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')

        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送订阅请求===END===')
    },
    sendQueryOverview () {
      console.log('===发送查询采购概况订阅请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_PURCHASE_STATISTICS, {timeType: that.activeBtn}, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')
        } else {
          // console.log('===发送失败===')
        }
      })
    },
    sendFatoryDirect () {
      console.log('===发送查询纸厂统计订阅请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_COMPANY_STATISTICS, {timeType: that.activeBtn, size: 200}, function (rep) {
        if (rep.code === 200) {
          // console.log('===30001发送成功===')
        } else {
          // console.log('===30001发送失败===')
        }
      })
    },
    // 查询采购概况 监听回调
    dealQueryOverview (val) {
      if (val.body.code === 200) {
        console.log('监听到查询采购概况================')
        this.overviewData = val.body.data
        this.showLoading = false
      }
    },
    // 查询纸厂统计 监听回调
    dealQueryFactory (val) {
      const that = this
      if (val.body.code === 200) {
        console.log('监听到查询纸厂统计================')
        console.log(val)
        this.factoryData = val.body.data.records
        let tmp = []
        that.factoryData.map((val, index) => {
          tmp.push([val.parentName, val.orderPayment])
        })
        that.factoryConfig = {
          header: ['供应商', '支付金额'],
          data: tmp,
          headerHeight: 34,
          headerBGC: '#0D1B6D',
          oddRowBGC: '#02063a',
          evenRowBGC: '#030842',
          rowNum: 15,
          waitTime: 3000,
          align: ['left']
        }
        console.log(this.factoryConfig)
      }
    },
    // 监听 推送采购订单通知
    dealOrder (val) {
      let res = val.body
      switch (res.status) {
        case 1: // 已发货
          console.log('采购单推送=>已发货================')
          console.log(val)
          this.fn1(res)
          break
        case 2: // 已收货 待定价
          console.log('采购单推送=>已收获================')
          console.log(val)
          this.fn2(res)
          break
        case 3: // 已定价 待核算
          console.log('采购单推送=>已定价================')
          console.log(val)
          this.fn3(res)
          break
        case 5: // 已完成
          console.log('采购单推送=>已完成================')
          console.log(val)
          this.fn5(res)
          break
        // case 6: // 已取消 发货状态累加采购单，不存在取消
        //   console.log('采购单推送=>已取消================')
        //   console.log(val)
        //   this.fn6(res)
        //   break
      }
    },
    fn1 (vla) { // 创建采购单
      var that = this
      that.overviewData.orderCount++
    },
    fn2 (val) { // 收获
      var that = this
      that.overviewData.orderWeight = this.overviewData.orderWeight + val.settleQuantity
      var list = that.factoryData
      try {
        list.forEach((item, index) => {
          if (item.parentId === val.destinationId) {
            that.factoryData[index].orderWeight = that.factoryData[index].orderWeight + val.settleQuantity
            throw new Error('break now foreach')
          }
        })
      } catch (e) {
        console.log(e.message)
      }
    },
    fn3 (val) { // 定价
      var that = this
      that.overviewData.orderSales = this.overviewData.orderSales + val.actualAmount
    },
    fn5 (val) { // 已完成
      var that = this
      var list = that.factoryData
      for (let i = 0; i < list.length; i++) {
        if (val.destinationId === list[i].parentId) {
          let data = that.factoryConfig.data
          data[i] = [data[i][0], val.paymentAmount > 0 ? (val.paymentAmount + data[i][1]) : data[i][1]]
          that.factoryConfig = {
            header: ['供应商', '支付金额'],
            data: data,
            headerHeight: 34,
            headerBGC: '#0D1B6D',
            oddRowBGC: '#02063a',
            evenRowBGC: '#030842',
            rowNum: 15,
            waitTime: 3000,
            align: ['left']
          }
          break
        }
      }
    },
    fn6 (val) { // 订单取消
      this.overviewData.orderCount--
    }
  }
}
</script>

<style scoped>

.showLoading {
  margin: 20% auto;
  color: white;
}
.full_container {
  width: 100%;
  height: 100%;
  background: url("../../../static/images/background.png");
  overflow: hidden;
}
.title_img {
  width: 80%;
  height: 15%;
  margin: 0 auto;
}
.title_img img {
  width: 100%;
}
.app_main {
  height: 85%;
  width: 95%;
  margin: 0 auto;
}

/* 按钮list */
.btn_list {
  margin-top: 5px;
  text-align: center;
}
.btn {
  width: 50px;
  background: rgba(13, 27, 109, 1);
  color: white;
  border: none;
  padding: 5px 10px;
}
.btn::after {
  border: none;
}
.activeBtn {
  background: #2a2aedff;
}

/* 弹性布局 */
.flex_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 10px;
  height: 80vh;
  overflow: hidden;
}
.flex2 {
  height: 100%;
  /* border:1px solid red; */
  overflow: hidden;
  flex: 2;
  background: rgba(6, 7, 107, 0.59);
}
.flex3 {
  height: 100%;
  flex: 3;
  margin: 0 20px;
}

</style>
